<template>
	<view class="self-inspection">
		<view class="list-filter">
			<view class="filter-item">{{projectName}}</view>
		</view>
		<view class="self-date" @click="showCalendar = true">
			 <!-- @click="showSelfDate" -->
			{{selfDate}}
			<u-icon v-if="showArrow" name="arrow-up" size="14"></u-icon>
			<u-icon v-else name="arrow-down" size="14"></u-icon>
		</view>
		<view class="item-style">
			<u-collapse :value="['2']">
				<u-collapse-item title="今日统计" name="2">
					<view class="item-content">
						<text>常规</text>
						<text class="num">{{ statisticsList.cg }}</text>
					</view>
					<view class="item-content">
						<text>临时</text>
						<text class="num">{{ statisticsList.ls }}</text>
					</view>
					<view class="item-content">
						<text>夜查</text>
						<text class="num">{{ statisticsList.yc }}</text>
					</view>
					<view class="item-content">
						<text>航拍</text>
						<text class="num">{{ statisticsList.hp }}</text>
					</view>
					<view class="item-content">
						<text>走航车</text>
						<text class="num">{{ statisticsList.zhc }}</text>
					</view>
				</u-collapse-item>
			</u-collapse>
		</view>
		<view class="box-list-record">
			<view class="record-today">今日记录({{ recordList }})</view>
			<u-subsection :list="list" :current="curNow" @change="sectionChange"></u-subsection>
			<view class="list-wrap">
				<view class="my-list">
					<view class="my-list-item" v-for="(item, index) in recordInList" :key="item.id">
						<navigator :url="`../../packageD/detail/detail?id=${item.id}`">
							<view class="list-item-title">
								<view>
									<text class="title-txt">
										项目名称 {{ item.projectName }}
									</text>
								</view>
								<view>
									<text>
										检查人员 {{ item.checkPersonName }}
									</text>
									<text v-if="item.checkTime">
										检查时间 {{ item.checkTime | date('YYYY-MM-DD') }}
									</text>
									<text>
										所属区域 {{ item.areaName }}
									</text>
								</view>
							</view>
							<view class="list-content">
								<text v-if="item.problemDescribe || item.remark">
									{{ item.problemDescribe ? item.problemDescribe : item.remark }}
								</text>
								<text v-else>无</text>
							</view>
							<view class="list-time">
								<view v-if="item.isRectify == 1">
									<view v-if="item.rectified">{{ item.rectified }}</view>
									<view v-else>需整改</view>
								</view>
							</view>
							<scroll-view scroll-x="true" class="list-tags">
								<uni-tag class="tag-item" v-if="item.reportAreaName" type="primary" :text="`上报级别 ${item.reportAreaName}`"></uni-tag>
								<uni-tag class="tag-item" v-for="s in statusOpts[0]" v-if="s.id == item.status" :key="s.id"
									:type="s.id == 1 ? 'success' : 'warning'" :text="s.title"></uni-tag>
								<uni-tag class="tag-item" v-if="item.problemLevel == 0" type="primary" text="普通"></uni-tag>
								<uni-tag class="tag-item" v-if="item.problemLevel == 1" type="error" text="严重"></uni-tag>
								<uni-tag class="tag-item" v-if="item.problemLevel == 2" type="error" text="紧急"></uni-tag>
								<uni-tag class="tag-item" v-if="item.problemLevel == 3" type="error" text="重大"></uni-tag>	
								<uni-tag class="tag-item" v-if="item.executePersonName" type="success" :text="`已交办给-${item.executePersonName}`"></uni-tag>
							</scroll-view>
						</navigator>
						<u-gap height="5" bgColor="#eee"></u-gap>
					</view>
				</view>
			</view>
		</view>
		<!-- 日期选择 -->
		<u-datetime-picker :show="showCalendar" v-model="value1" mode="date" @confirm="confirmCalendar"
			@close="calendarClose" @cancel="cancelCalendar"></u-datetime-picker>
	</view>
</template>

<script>
	import config from '@/utils/defaultConfig'
	import {
		getPatrolByProAndTimeCnt,
		getPatrolByTypeList,
		getTodayCnt
	} from '@/api/assigned-by-superior'
	export default {
		data () {
			return {
				curNow: 0,
				list: ['检查单', '已整改', '未整改'],
				indexShow: false,
				showProject: false,
				projectList: [],
				projectName: '',
				showArrow: false,
				showDate: false,
				selfDate: '日期选择',
				showCalendar: false,
				value1: Number(new Date()),
				statusOpts: [
					config.status
				],
				// 今日统计
				statisticsListParams: {
					createTime: '',
					projectId: '',
					// type: ''
				},
				recordListParams: {
					createTime: '',
					projectId: '',
					type: 0
				},
				recordInListParams: {
					createTime: '',
					projectId: '',
					type: 0,
					pageNum: 1,
					reasonable:false
				},
				statisticsList: {},
				recordList: '',
				recordInList: [],
				projectId: ''
			}
		},
		onLoad(options){
			this.projectId = options.projectId;
			this.projectName = options.projectName
		},
		mounted() {
			this.getListToday()
			this.getListTodayRecord()
			this.getListTodayRecordIn()
		},
		methods: {
			// 获取今日统计数据
			getListToday () {
				uni.showLoading({
					title: '数据加载中',
					mask: true
				})
				this.statisticsListParams.projectId = this.projectId
				getPatrolByProAndTimeCnt(this.statisticsListParams).then(res => {
					this.statisticsList = res.data.data
				}).catch(error => {
					uni.$u.toast(error)
				}).finally(() => {
					uni.hideLoading()
				})
			},	
			// 获取今日记录数据
			getListTodayRecord () {
				this.recordListParams.projectId = this.projectId
				getTodayCnt(this.recordListParams).then(res => {
					this.recordList = res.data.data
				})
			},
			// 获取检查单数据
			getListTodayRecordIn () {
				uni.showLoading({
					title: '数据加载中',
					mask: true
				})
				this.recordInListParams.projectId = this.projectId
				getPatrolByTypeList(this.recordInListParams).then(res => {
					const data = res.data.data
					if (data.length > 0) {
						this.recordInList = this.recordInList.concat(data)
					} else {
						uni.$u.toast('没有更多数据')
					}
					// this.recordInList = res.data.data
				}).catch(error => {
					uni.$u.toast(error)
				}).finally(() => {
					uni.hideLoading()
				})
			},
			// 滚动到底部触发事件
			onReachBottom() {
				this.recordInListParams.pageNum++
				// console.log(this.params.pageNum)
				this.getListTodayRecordIn()
			},
			// 下拉刷新
			onPullDownRefresh() {
				this.recordInList = []
				this.recordInListParams.pageNum = 1
				this.getListToday()
				this.getListTodayRecord()
				this.getListTodayRecordIn()
				uni.stopPullDownRefresh()
			},
			// tab切换
			sectionChange(index) {
				this.curNow = index;
				if (this.curNow === 0) {
					// this.recordListParams.type = 0
					this.recordInListParams.type = 0
				} else if (this.curNow === 1) {
					// this.recordListParams.type = 1
					this.recordInListParams.type = 1
				} else {
					// this.recordListParams.type = 2
					this.recordInListParams.type = 2
				}
				this.recordInList = []
				this.recordInListParams.pageNum = 1
				this.getListTodayRecord()
				this.getListTodayRecordIn()
			},
			// 日历
			confirmCalendar(e) {
				this.showCalendar = false
				this.selfDate = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
				this.statisticsListParams.createTime = this.selfDate
				this.recordListParams.createTime = this.selfDate
				this.recordInListParams.createTime = this.selfDate
				this.recordInList = []
				this.recordInListParams.pageNum = 1
				this.getListToday()
				this.getListTodayRecord()
				this.getListTodayRecordIn()
			},
			calendarClose() {
				this.showCalendar = false
			},
			cancelCalendar() {
				this.showCalendar = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	.self-inspection {
		font-size: 28upx;
		height: 100vh;
		.filter-item {
			font-size: 32upx;
			flex-grow: 1;
			padding: 20upx 0;
			display: flex;
			justify-content: center;
			text-align: center;
			font-weight: bold;
		}
		.self-date {
			font-size: 32upx;
			display: flex;
			justify-content: space-between;
			line-height: 80upx;
			padding: 0 28upx;
			box-shadow: 0 10px 5px $uni-bg-color-grey;
			margin-bottom: 20upx;
			border-top: 1px solid $uni-bg-color-grey;
		}
		.item-style {
			box-shadow: 0 10px 5px $uni-bg-color-grey;
			margin-bottom: 20upx;
			.item-content {
				line-height: 54upx;
				display: flex;
				justify-content: space-between;
				.num {
					color: $uni-color-primary;
				}
			}
		}
		.box-list-record {
			padding: 10upx 30upx;
			.record-today {
				line-height: 70upx;
				color: $uni-color-primary;
				font-weight: bold;
			}
		}
		.list-wrap {
			padding-bottom: 100upx;
			.list-item-title {
				font-size: 24upx;
				border-bottom: 1px solid $u-light-color;
				padding: 15upx;
				color: $u-light-color;
				text {
					margin-right: 15upx;
				}
				.title-txt {
					padding-left: 10upx;
					border-left: 10upx solid $uni-color-primary;
					border-radius: 5upx;
				}
			}
			.list-content {
				padding: 15upx;
				text {
					word-wrap: break-word;
				}
			}
			.list-time {
				text-align: right;
				margin: 5upx 15upx 10upx 0;
				color: $u-light-color;
			}
			.list-tags {
				white-space: nowrap;
				width: 100%;
				height: 40upx;
				border-top: 1px solid $u-light-color;
				padding:10upx;
				.tag-item {
					margin-right: 5upx;
				}
			}
		}

	}
</style>
